<template>
  <div class="email_set_box">
    <div class="end_session_category searchBox">
      <span class="todo_btn" @click="addOne"><i class="el-icon-plus"></i>  {{$t('config.channel.addOneEmailEnd')}}</span>
      <span class="todo_btn" @click="refreshTable"><i class="iconfont icon-shuaxin"></i>{{$t('public.refresh')}}</span>
      <el-input
        v-show="isShowInput"
        :placeholder="$t('configLazyLoad.channel.mailTip2')"
        size="mini"
        class="condition"
        v-model="searchLabelName"
        @keyup.enter.native="searchLabel">
        <i
          class="el-input__icon el-icon-search"
          slot="suffix"
          @click="searchLabel">
        </i>
      </el-input>
    </div>
    <end-session-tree-table
      :tableData="tableData"
      :searchLabelName="searchLabelName"
      :searchLabelRandom="searchLabelRandom"
      :doAddRandom="doAddRandom"
      v-if="tableLoading"
      @delete="deleteLabel"
      :refreshflag="refreshflag"
      @save="saveLabel">
    </end-session-tree-table>
  </div>
</template>
<script>
  import EndSessionTreeTable from './EndSessionTreeTable.vue'
  import { deepClone } from '@/utils/m7Utils.js'
  import * as uuid from 'uuid'
  function getDicByType (store, data) {
    let dataNew = {
      type: data
    }
    return store.dispatch('getDicByType', dataNew)
  }
  function delDicItem (store, data) {
    let dataNew = {
      key: data.data.key,
      level: data.data.levelStr,
      _id: data._id
    }
    return store.dispatch('delDicItem', dataNew)
  }
  function saveDic (store, data) {
    let dataNew = {
      _id: data._id,
      type: 'email',
      key: data.data.key,
      lastLevel: data.data.lastLevel,
      level: data.data.levelStr,
      name: data.data.name,
      flag: 'update'
    }
    if (!dataNew.key) {
      dataNew.key = uuid.v1()
      dataNew.flag = 'add'
      dataNew.level = dataNew.lastLevel ? dataNew.lastLevel + '_0' : '0'
    }
    if (dataNew.name) {
      return store.dispatch('saveDicItem', dataNew)
    } else {
      return false
    }
  }
  export default{
    name: 'EndSessionCategory',
    data () {
      return {
        searchLabelName: '',
        isShowInput: true,
        tableData: [],
        doAddRandom: 0,
        tableLoading: true,
        refreshflag: 0,
        _id: '',
        tableDataClone: [],
        searchLabelRandom: 0
      }
    },
    methods: {
      addOne () {
        this.doAddRandom = Math.random()
      },
      refreshTable () {
        this.searchLabelName = ''
        let that = this
        getDicByType(that.$store, 'email').then((res) => {
          if (res.row && res.row.options.length) {
            that.handleLabel(res.row.options)
            that.refreshflag = Math.random()
            that._id = res.row._id
          }
        })
      },
      handleLabel (data) {
        this.tableLoading = false
        this.tableData = []
        for (let i = 0; i < data.length; i++) {
          var obj = {
            keyStr: 'email_' + i,
            key: data[i].key,
            level: 1,
            levelStr: i + '',
            name: data[i].name,
            status: false,
            flag: false,
            lastLevel: ''
          }
          this.tableData.push(obj)
          if (data[i].options && data[i].options.length) {
            let options1 = data[i].options
            for (let a = 0; a < options1.length; a++) {
              var obj2 = {
                keyStr: 'email_' + i + '-' + a,
                key: options1[a].key,
                level: 2,
                levelStr: i + '_' + a,
                name: options1[a].name,
                status: false,
                flag: false,
                lastLevel: i + ''
              }
              this.tableData.push(obj2)
              if (options1[a].options && options1[a].options.length) {
                let options2 = options1[a].options
                for (let d = 0; d < options2.length; d++) {
                  var obj3 = {
                    keyStr: 'email_' + i + '-' + a + '-' + d,
                    key: options2[d].key,
                    level: 3,
                    levelStr: i + '_' + a + '_' + d,
                    name: options2[d].name,
                    status: false,
                    flag: false,
                    lastLevel: i + '_' + a
                  }
                  this.tableData.push(obj3)
                }
              }
            }
          }
        }
        this.tableLoading = true
      },
      deleteLabel (data) {
        let _id = this._id
        let that = this
        that.tableDataClone = deepClone(that.tableData)
        delDicItem(that.$store, {data: data, _id: _id}).then((res) => {
          if (res.success) {
            that.handleLabel(res.row.options)
            that.refreshflag = Math.random()
          }
        })
      },
      saveLabel (data) {
        if (!data.name) {
          this.$message(this.$t('configLazyLoad.channel.mailTip3'))
          return
        }
        let that = this
        let _id = this._id
        that.tableDataClone = deepClone(that.tableData)
        saveDic(that.$store, {data: data, _id: _id}).then((res) => {
          if (res.success) {
            that.handleLabel(res.row.options)
//            that.refreshflag = Math.random()
            let arr = that.tableDataClone
            let newArr = that.tableData
            for (let i = 0; i < arr.length; i++) {
              if (arr[i].key === newArr[i].key) {
                newArr[i].flag = arr[i].flag
              }
            }
            if (!_id) {
              this.refreshTable()
            }
            that.refreshflag = Math.random() + 1
          }
        })
      },
      searchLabel () {
        this.searchLabelRandom = Math.random()
      }
    },
    components: {
      EndSessionTreeTable
    },
    beforeMount () {
      this.refreshTable()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .searchBox
    height 30px
    padding 3px 10px 3px 15px
    line-height 30px
  .condition
    width 200px
    float right

  .todo_btn
    cursor pointer
    margin-right 20px
    i
      color $c-main
  .icon-shuaxin
    font-size 12px
</style>
